<template>
	<div>
		<van-tree-select class="select-wrapper" :items="items" :main-active-index.sync="active">
			<template #content>
				<!-- <van-image
		      v-if="active === 0"
		      src="https://img01.yzcdn.cn/vant/apple-1.jpg"
		    />
		    <van-image
		      v-if="active === 1"
		      src="https://img01.yzcdn.cn/vant/apple-2.jpg"
		    /> -->
				<div style="display: flex;flex-flow: row wrap;padding: 10px 20px;justify-content: space-between;">
					<div style="display: flex;flex-direction: column;align-items: center;flex: 0 0 26%;margin-bottom: 10px;padding: 0 3%;"
						v-for="(item,index) in dataList" :key="index">
						<div>
							<van-image :src="item.img"></van-image>
						</div>
						<span>{{item.name}}</span>
					</div>
				</div>
			</template>
		</van-tree-select>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				items: [{
					text: '热门推荐'
				}, {
					text: '手机数码'
				}],
				dataList: [{
						img: 'https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg',
						name: '空调',
						url: ''
					}, {
						img: 'https://img10.360buyimg.com/focus/s140x140_jfs/t1/119891/13/5448/24096/5ef01048E096cfd33/260803efca5e8a73.jpg',
						name: '冰箱',
						url: ''
					}, {
						img: 'https://img12.360buyimg.com/focus/s140x140_jfs/t1/131424/31/274/19042/5ecb3bc2E96ef8448/0188085e6fd6cd12.png',
						name: '电脑',
						url: ''
					}, {
						img: 'https://img14.360buyimg.com/focus/s140x140_jfs/t27136/183/1628977274/31007/a6f7ed55/5be6ebd8Nb07ef492.png',
						name: '手机',
						url: ''
					}, {
						img: 'https://img20.360buyimg.com/focus/s140x140_jfs/t1/86638/37/11918/19572/5e3e4307E7606f742/0210ac72c0d9275e.jpg',
						name: '全屏手机',
						url: ''
					}, {
						img: 'https://img30.360buyimg.com/focus/s140x140_jfs/t1/134182/23/366/16758/5eccb3caE2b8d0c6d/7ab40f9d9441a2a5.jpg',
						name: '保健品',
						url: ''
					}, {
						img: 'https://img20.360buyimg.com/focus/s140x140_jfs/t1/102972/19/11837/14987/5e3d8bdaEc8ffe21e/6119d3f773fcdacd.jpg',
						name: '游戏手机',
						url: ''
					},
					{
						img: 'https://img14.360buyimg.com/focus/s140x140_jfs/t1/114862/21/8081/13361/5ecb398fEc7c98869/4b4101d0acbf4ced.jpg',
						name: '口罩',
						url: ''
					},
					{
						img: 'https://img13.360buyimg.com/focus/s140x140_jfs/t1/136893/38/305/31308/5ecb84dcE410bc59a/36568e70a84f8807.jpg',
						name: '驱蚊用品',
						url: ''
					},
					{
						img: 'https://img20.360buyimg.com/focus/s140x140_jfs/t1/102972/19/11837/14987/5e3d8bdaEc8ffe21e/6119d3f773fcdacd.jpg',
						name: '游戏手机',
						url: ''
					},
				]
			}
		},
		methods: {

		},
		watch: {
			active() {
				switch(this.active) {
					case 0:
						this.dataList = [{
								img: 'https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg',
								name: '空调',
								url: ''
							}, {
								img: 'https://img10.360buyimg.com/focus/s140x140_jfs/t1/119891/13/5448/24096/5ef01048E096cfd33/260803efca5e8a73.jpg',
								name: '冰箱',
								url: ''
							}, {
								img: 'https://img12.360buyimg.com/focus/s140x140_jfs/t1/131424/31/274/19042/5ecb3bc2E96ef8448/0188085e6fd6cd12.png',
								name: '电脑',
								url: ''
							}, {
								img: 'https://img14.360buyimg.com/focus/s140x140_jfs/t27136/183/1628977274/31007/a6f7ed55/5be6ebd8Nb07ef492.png',
								name: '手机',
								url: ''
							}, {
								img: 'https://img20.360buyimg.com/focus/s140x140_jfs/t1/86638/37/11918/19572/5e3e4307E7606f742/0210ac72c0d9275e.jpg',
								name: '全屏手机',
								url: ''
							}, {
								img: 'https://img30.360buyimg.com/focus/s140x140_jfs/t1/134182/23/366/16758/5eccb3caE2b8d0c6d/7ab40f9d9441a2a5.jpg',
								name: '保健品',
								url: ''
							}, {
								img: 'https://img20.360buyimg.com/focus/s140x140_jfs/t1/102972/19/11837/14987/5e3d8bdaEc8ffe21e/6119d3f773fcdacd.jpg',
								name: '游戏手机',
								url: ''
							},
							{
								img: 'https://img14.360buyimg.com/focus/s140x140_jfs/t1/114862/21/8081/13361/5ecb398fEc7c98869/4b4101d0acbf4ced.jpg',
								name: '口罩',
								url: ''
							},
							{
								img: 'https://img13.360buyimg.com/focus/s140x140_jfs/t1/136893/38/305/31308/5ecb84dcE410bc59a/36568e70a84f8807.jpg',
								name: '驱蚊用品',
								url: ''
							},
							{
								img: 'https://img20.360buyimg.com/focus/s140x140_jfs/t1/102972/19/11837/14987/5e3d8bdaEc8ffe21e/6119d3f773fcdacd.jpg',
								name: '游戏手机',
								url: ''
							},
						]
						break;
					case 1:
						this.dataList = [
							{
									img: 'https://img30.360buyimg.com/focus/s140x140_jfs/t13411/188/926813276/3945/a4f47292/5a1692eeN105a64b4.png',
									name: '小米',
									url: ''
								}, {
									img: 'https://img14.360buyimg.com/focus/s140x140_jfs/t11929/135/2372293765/1396/e103ec31/5a1692e2Nbea6e136.jpg',
									name: '华为',
									url: ''
								}, {
									img: 'https://img10.360buyimg.com/focus/s140x140_jfs/t12178/348/911080073/4732/db0ad9c7/5a1692e2N6df7c609.jpg',
									name: '荣耀',
									url: ''
								}, {
									img: 'https://img20.360buyimg.com/focus/s140x140_jfs/t13759/194/897734755/2493/1305d4c4/5a1692ebN8ae73077.jpg',
									name: 'iphone',
									url: ''
								}, {
									img: 'https://img11.360buyimg.com/focus/s140x140_jfs/t11014/359/2341377211/2777/1755c29c/5a169244Nff0179e0.png',
									name: 'vivo',
									url: ''
								}, {
									img: 'https://img13.360buyimg.com/focus/s140x140_jfs/t13036/273/932026474/2570/a3517c7d/5a169254N4bbbd9fb.png',
									name: 'oppo',
									url: ''
								}, {
									img: 'https://img20.360buyimg.com/focus/s140x140_jfs/t12820/326/909017718/7138/68cde747/5a169243N40eca33c.jpg',
									name: '魅族',
									url: ''
								},
								{
									img: 'https://img13.360buyimg.com/focus/s140x140_jfs/t11509/131/2348573811/3425/4f20fe6/5a16925aN8a6dfd03.png',
									name: '三星',
									url: ''
								},
								{
									img: 'https://img13.360buyimg.com/focus/s140x140_jfs/t11209/71/2351231464/4158/fc0c415c/5a16923fNfc14307e.jpg',
									name: '一加',
									url: ''
								},
								{
									img: 'https://img11.360buyimg.com/focus/s140x140_jfs/t1/108301/34/7712/3254/5e5f0de9E4ca2f4b5/c664966ee1d36d47.jpg',
									name: '努比亚',
									url: ''
								},
						]
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select-wrapper {
		height: calc(100vh - 55px) !important;
	}
</style>
